<template>
  <header class="header-area">
    <el-row class="navigation" :class="isFixed ? 'fixed-top' : ''">
      <el-col :span="16" :offset="4">
        <el-row type="flex">
          <el-col :span="4" class="row-logo">
            <a href="/" tag="a">
              <img src="../assets/logo.png" class="nav-logo" alt="" />
            </a>
          </el-col>
          <el-col :span="20" class="row-nav">
            <ul>
              <router-link tag="li" to="/home">
                <a href="#">首页</a>
              </router-link>
              <router-link tag="li" to="/about">
                <a href="#">关于我们</a>
              </router-link>
              <router-link tag="li" to="/news">
                <a href="#">新闻中心</a>
              </router-link>
              <router-link tag="li" to="/product">
                <a href="#">产品中心</a>
              </router-link>
              <router-link tag="li" to="/contact">
                <a href="#">联系我们</a>
              </router-link>
            </ul>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      isFixed: false,
    }
  },
  mounted() {
    window.onscroll = this.ScrollFun;
  },
  methods: {
    ScrollFun() {
      var scroll = document.documentElement.scrollTop;
      if (scroll > 5) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header-area {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: absolute;
  z-index: 10;
  .navigation {
    transition: all 0.5s ease-out 0s;
  }
  .fixed-top {
    width: 100%;
    position: fixed;
    background: #fb7e00;
    opacity: 0.9;
    top: 0;
    z-index: 1030;
  }
  a {
    color: #333;
    text-decoration: none;
    display: block;
    line-height: 60px;
  }
  .row-logo {
    text-align: center;
    .nav-logo {
      vertical-align: middle;
      height: 40px;
    }
  }
  .row-nav {
    float: right;
    li {
      float: left;
      padding: 0 20px;
    }
    a{
      color: #ccc;
    }
  }
  .router-link-active {
    border-bottom: 2px solid rgba(206, 205, 205, 0.8);
  }
}
</style>